import _ from 'lodash'
import React from 'react'
import { Button, InputNumber, Tooltip, Icon, Pagination } from 'antd'
import { BaseListPage, IBaseListPageProps, IBaseListPageState, UdDateRangePicker } from '../../../lib'
import { UdModal } from '../../../lib/ui/UdModal'

class DispatchList extends BaseListPage<IDispatchListProps, IDispatchListState> {
  
  constructor(props: IDispatchListProps) {
    super(props)
    this.state = {
      title: '分码管理列表',
      queryApi: '/dispatch/page',
      conditions: [
        { id: 'dispatchNo', label: '分发单号' },
        { id: ['startTime', 'endTime'], label: '分发时间', render: <UdDateRangePicker format="YYYY-MM-DD 00:0:00" showTime={false} /> },
        { id: 'receiverCode', label: '接收人编码', render: <InputNumber /> },
        { id: 'packageCode', label: '包码' }
      ],
      rowKey: 'dispatchNo',
      rightBtns: [
        <Button type="primary" onClick={this.openModal}>分发</Button>
      ],
      columns: [
        [
          <>
            <span>分发单号 </span>
            <Tooltip title="插卡剑荡四方">
              <Icon type="question-circle" />
            </Tooltip>
          </>,
          'dispatchNo', undefined, { minWidth: '600px' }
        ],
        ['接收人编码', 'receiverCode', undefined, { fixedWidth: '300px' }],
        ['接收人名称', 'receiverName', undefined, { fixedWidth: '300px' }],
        ['分发数量', 'optId', undefined, { fixedWidth: '200px' }]
      ],
      tableProps: {
        expandedRowRender: record => <div style={{ textAlign: 'center' }}>
          {_.map(record.details, 'packageCode')}
        </div>
      }
    }
  }

  private openModal = () => {
    UdModal.open({
      title: '测试模态框',
      content: <>
        <h1>测试内容，返回固定内容</h1>
        <Pagination total={200} showSizeChanger={true} showQuickJumper={true}></Pagination>
      </>
    })
  }

}

interface IDispatchListProps extends IBaseListPageProps {

}

interface IDispatchListState extends IBaseListPageState {

}

export default DispatchList
